<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
    <!-- 
        总结
            a. 讲道理传入的data数据，在生成实例之后，变成了 vm._data
            b. 在使用的时候，应该也使用 _data.数据属性，但是这种方式访问数据太麻烦了
            c. 作者设计的时候把_data中的所有属性，通过 Object.defineProperty() 声明到vm上
            d. 已知vm实例上的属性，可以直接在{{}}表达式中书写，所以写起来就简洁了
            e. 而为什么不直接声明在vm实例上，目的是为了将来的数据发生变化时方便监视和管理
     -->
</head>
<body>
    <div id="app" class="box">
        <!-- 既然属性传到了vue中，产生出了一个 _data对象，按道理应该使用_data的属性 -->
        <!-- <h1>hello {{ _data.msg }}</h1>
        <p>num的值是： {{ _data.num }}</p>
        <p>num的值是： {{ _data.usr.uname }}</p> -->

        <!-- 在vue中，只要是vm实例上的属性，可以直接写在表达式中 -->
        <!-- 也就意味着，如果把_data中的属性写入到vm实例上，那么使用时就不用再加_data -->
        <h1>hello {{ msg }}</h1>
        <p>num的值是： {{ num }}</p>
        <p>num的值是： {{ usr.uname }}</p>
    </div>

    <script>
    Vue.config.productionTip = false

    const data = {
        msg: '尚硅谷',
        num: 108,
        usr: {
            uname: '迪丽热巴'
        }
    }

    const vm = new Vue({
        el: '#app',
        data
    })

    // 打印一下vue的实例
    console.log(vm)
    // 在创建vue实例的时候，vue会把传入的data对象，重新构建到一个 _data中
    // 目的就是为了便于管理和监视
    console.log(data === vm._data)

    </script>
</body>
</html>